{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>

    <style>
        html, body {
            height: 100%;
            width: 100%;
        }

        .light-gray-bg {
            padding: 5% 35%;

        }

        .all4 {
            width: 600px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="contents" style="margin: 140px 35%;">
        <div class="grid_wrapper">
            <div class="g_6 contents_header">
                <h3 class="i_16_forms tab_label">修改密码</h3>
                <div><span class="label">edit password</span></div>
            </div>
            <div class="g_12 separator"><span></span></div>
            <div class="all4" id="all4">
                <div id="changePassword" style="padding: 10px 0">
                    <form class="layui-form" method="post" id="changePassword_form" onsubmit="return false">
                        <div class="layui-form-item">
                            <label class="layui-form-label">新&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码:</label>
                            <div class="layui-input-inline">
                                <input id="newPassword" type="password" name="changePassword" placeholder="请输入新密码"
                                       autocomplete="off"
                                       class="layui-input"
                                       lay-verify="first" lay-verType="tips"
                                       style="color: black;border-color: black">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">再次输入:</label>
                            <div class="layui-input-inline">
                                <input id="checkPassword" type="password" name="checkPassword"
                                       placeholder="请再次输入新密码"
                                       autocomplete="off"
                                       class="layui-input"
                                       lay-verify="check" lay-verType="tips"
                                       style="color: black;border-color: black">
                            </div>
                        </div>
                        <div class="layui-form-item btn">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="change"
                                        style="background-color: rgba(28, 119, 180,0.8)">确定
                                </button>
                                <button class="layui-btn" lay-submit="" id="cancelChange" lay-filter="cancelChange"
                                        style="background-color: rgba(28, 119, 180,0.8)">取消
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        layui.use(['element', 'carousel', 'form', 'layer'], function () {
            // layui元素定义
            let form = layui.form;
            let layer = layui.layer;
            let chageLayer = null;


            form.on('submit(change)', function (data) {
                //验证两次密码是否相同
                if (data.field.checkPassword !== data.field.changePassword) {
                    layer.msg("两次密码输入不相同，请检查")
                } else {
                    $.ajax({
                        url: '/user/change_password',
                        method: 'post',
                        data: data.field,
                        success: function (result) {
                            if (result.msg === "success") {
                                layer.msg("密码修改成功")
                                //清空表单
                                $("#changePassword_form")[0].reset()
                                form.render()
                                layer.close(chageLayer)
                                //跳转到登陆界面
                                setTimeout(() => {
                                    window.location.href = '/'
                                }, 1000)
                            }
                        },
                        error: function (err) {
                            if (err.status === 406) {
                                layer.msg(err.responseJSON.data)
                            }
                        }
                    })
                }
                return false
            })
            form.verify({
                first: function (value, item) {
                    if (value === '') {
                        return '请输入新密码'
                    }
                },
                check: function (value, item) {
                    if (value === '') {
                        return '请再次输入新密码'
                    }
                }
            });
        })
    </script>
{% endblock %}
